<template>
  <a-progress
    :format="format"
    :percent="percent"
    :show-info="showInfo"
    :status="status"
    :stroke-color="strokeColor"
    :stroke-linecap="strokeLinecap"
    :success="success"
    :title="title"
    :trail-color="trailColor"
    :type="type"
    :steps="steps"
    :stroke-width="strokeWidth"
    :width="width"
    :gap-degree="gapDegree"
    :gap-position="gapPosition"
  >
    <template v-if="$slots.format" #format>
      <slot name="format" />
    </template>
    <slot />
  </a-progress>
</template>

<script>
import { defineComponent } from 'vue'
import { Progress } from 'ant-design-vue'
export default defineComponent({
  name: 'ZProgress',
  components: {
    AProgress: Progress
  },
  props: {
    format: {
      type: Function,
      default: undefined
    },
    percent: {
      type: Number,
      default: 0
    },
    showInfo: {
      type: Boolean,
      default: true
    },
    status: {
      type: String,
      default: undefined
    },
    strokeColor: {
      type: [String, Object],
      default: undefined
    },
    strokeLinecap: {
      type: String,
      default: 'round'
    },
    success: {
      type: Object,
      default: undefined
    },
    title: {
      type: String,
      default: undefined
    },
    trailColor: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: undefined
    },
    steps: {
      type: Number,
      default: undefined
    },
    strokeWidth: {
      type: Number,
      default: undefined
    },
    width: {
      type: Number,
      default: 132
    },
    gapDegree: {
      type: Number,
      default: 75
    },
    gapPosition: {
      type: String,
      default: 'bottom'
    }
  }
})
</script>
